import { Popover, Table, Tag, Button, Modal, Switch } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons'
import axios from 'axios'
import { useState, useEffect } from 'react'
const { confirm } = Modal

export default function RightList() {
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios.get('/rights?_embed=children').then((res) => {
      const list = res.data
      //   对item.children为空数组的元素进行处理
      list.forEach((data) => {
        if (!data.children.length) {
          data.children = ''
        }
      })
      setDataSource(list)
    })
  }, [])
  const showDeleteConfirm = (item) => {
    confirm({
      title: '是否确认删除?',
      icon: <ExclamationCircleOutlined />,
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel')
      },
    })
  }

  //   确认删除的方法
  const deleteMethod = (item) => {
    if (item.grade === 1) {
      setDataSource(dataSource.filter((ele) => ele.id !== item.id))
      axios.delete(`/rights/${item.id}`)
    } else {
      let list = dataSource.filter((ele) => ele.id === item.rightId)
      list[0].children = list[0].children.filter((ele) => ele.id !== item.id)
      setDataSource([...dataSource])

      axios.delete(`/children/${item.id}`)
    }
  }

  // 开关按钮的方法
  const SwitchMethod = (item) => {
    item.pagepermisson = item.pagepermisson === 1 ? 0 : 1
    setDataSource([...dataSource])

    if (item.grade === 1) {
      axios.patch(`/rights/${item.id}`, {
        pagepermisson: item.pagepermisson,
      })
    } else {
      axios.patch(`/children/${item.id}`, {
        pagepermisson: item.pagepermisson,
      })
    }
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      },
    },
    {
      title: '权限名称',
      dataIndex: 'title',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render: (key) => {
        return <Tag color="orange">{key}</Tag>
      },
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button
              danger
              shape="circle"
              icon={<DeleteOutlined />}
              onClick={() => showDeleteConfirm(item)}
            />
            <Popover
              content={
                <div style={{ textAlign: 'center' }}>
                  <Switch
                    checked={item.pagepermisson}
                    onChange={() => SwitchMethod(item)}
                  ></Switch>
                </div>
              }
              title="页面配置项"
              trigger={item.pagepermisson ? 'click' : ''}
            >
              <Button
                type="primary"
                shape="circle"
                icon={<EditOutlined />}
                disabled={!item.pagepermisson}
              />
            </Popover>
          </div>
        )
      },
    },
  ]
  return (
    <div>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          pageSize: 5,
        }}
      />
    </div>
  )
}
